<template>
  <div id="app">
    <!-- 第一种方式： 使用v-model的方式 语法糖的方式
         sync也是一个语法糖 需要绑定多个属性的时候就可以使用.sync
    -->
    <personnel-info v-model="phoneInfo" :zip-code.sync="zipCode"></personnel-info>

    <!-- 第二种方式： 不使用语法糖的方式 
         第二种方式只是语法糖 v-model绑定的phoneInfo就是绑定的change事件 另外一个属性就是update事件
    -->
    <personnel-info 
      :phone-info="phoneInfo" 
      :zip-code="zipCode"
      @change="val=>(phoneInfo=val)"
      @update:zipCode="val=>(zipCode=val)"
      >
    </personnel-info>

    <br/>
    phoneInfo: {{phoneInfo}}
    <br/>
    zipCode: {{zipCode}}
  </div>
</template>

<script>
import PersonnelInfo from './components/PersonnelInfo.vue'
export default {
  name: 'App',
  components: {
    PersonnelInfo
  },
  data() {
    return {
     phoneInfo: {
       areaCode: "+86",
       phone: ""
     },
     zipCode: ""
    }
  },
  methods: {
  
  }
}
</script>